(function($) {

    var enemies = [];
    var enemiesFires = [];
    var mouse;
    var ip;
    var socketUDP = new MousePartyUDPClient();
    var pontos = 0;
    socketUDP.onMessage(function(msg, opts) {
        var novo = true;
        var eni = JSON.parse(msg);
        if (eni.act === "pos") {
            for (var i = 0; i < enemies.length; i++) {
                if (enemies[i].ip === eni.ip) {
                    novo = false;
                    enemies[i] = eni;
                    break;
                }
            }
            if (novo) {
                enemies.push(eni);
            }
        }else if(eni.act === "fire"){
                var square_dist = Math.pow((eni.x - mouse.x), 2) + Math.pow((eni.y - mouse.y), 2);
                if(square_dist <= Math.pow(30, 2)){
                    var msgGain = {
                        act: 'gain',
                        ip: eni.ip
                    };
                    socketUDP.sendMessage(JSON.stringify(msgGain));
                    
                }
                enemiesFires.push({x: eni.x, y: eni.y});
        }else if(eni.act === "gain"){
            if(eni.ip === ip){
                pontos++;
                $("#pontos").text("Seus pontos: "+pontos);
            }
        }

    });

    $(document).ready(function() {
        var imgEnemy = $('<img/>', {src: "img/enemy.png"}).get(0);
        ip = socketUDP.getIP();
        var $canvas = $("#canvasParty");
        var $coord = $("#mousePosition");
        var pos = $canvas.offset();
        var ctx = $canvas.get(0).getContext("2d");
        ctx.fillStyle = "rgba(255,0,0,0.1)";

        var explosoes = [];


        setInterval(function() {
            ctx.clearRect(0, 0, 500, 500);
            for (var i = 0; i < explosoes.length; i++) {
                ctx.beginPath();
                ctx.fillStyle = "rgba(25,200,2," + explosoes[i].opacity + ")";
                //console.log(JSON.stringify(explosoes[i]));
                ctx.arc(explosoes[i].x, explosoes[i].y, 30, 0, 2 * Math.PI);
                ctx.fill();
                var msgFire = {
                    act: 'fire',
                    ip: ip,
                    x: explosoes[i].x,
                    y: explosoes[i].y
                };
                socketUDP.sendMessage(JSON.stringify(msgFire));
                
                explosoes[i].opacity -= 0.01;
                if (explosoes[i].opacity < 0.01) {
                    explosoes.splice(i, 1);
                }
            }

            
            for (var i = 0; i < enemiesFires.length; i++) {
                ctx.beginPath();
                ctx.fillStyle = "rgb(250,2,2)";
                //console.log(JSON.stringify(explosoes[i]));
                ctx.arc(enemiesFires[i].x, enemiesFires[i].y, 30, 0, 2 * Math.PI);
                ctx.fill();
            }
            enemiesFires = [];
            
            for (var i = 0; i < enemies.length; i++) {
                //ctx.beginPath();
                //ctx.fillStyle = "rgb(0,20,200)";
                //console.log(JSON.stringify(explosoes[i]));
                ctx.drawImage(imgEnemy, enemies[i].x-16, enemies[i].y-16);
                //ctx.arc(enemies[i].x, enemies[i].y, 16, 0, 2 * Math.PI);
                //ctx.fill();
            }

        }, 40);

        $canvas.on("mousemove", function(e) {
            mouse = {
                act: 'pos',
                ip: ip,
                x: e.pageX - pos.left + 16,
                y: e.pageY - pos.top + 16
            };
            $coord.text("x: " + mouse.x + ",  y: " + mouse.y + ", ip: " + ip);
            socketUDP.sendMessage(JSON.stringify(mouse));
        }).on("click", function(e) {
            var x = e.pageX - pos.left + 16, y = e.pageY - pos.top + 16;
            explosoes.push({
                x: x,
                y: y,
                opacity: 1
            });

        });


    });





})(jQuery);

